<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1{
				width: 500px;
				height: 500px;
				background: #F00;
				/* border: 1px solid blue; */
				/* overflow: hidden; */
				padding-left: 150px;
				padding-top: 150px;
				box-sizing: border-box;
			}
			.box2{
				width: 200px;
				height: 200px;
				background: #00F;
				/* margin-left: 150px; */
				/* margin-top: 150px; */
			}
		</style>
	</head>
	<body>
		<!--
		 需求：
		 有两个盒子
		  大盒子:宽高500px
		  小盒子:宽高200px
		  小盒子在大盒子内而且水平与垂直都居中
		  
		  盒子居中注意点：
		  1.如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来
		  2.如果外面的盒子不想被一起定下来,那么可以给外面的盒子
		  2-1 添加一个边框属性
		  2-2 或者设置属性overflow: hidden;
		  3.在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin
		  margin本质上是用于控制兄弟关系之间的间隙的
		  4、设置margin:0 auto;可让盒子自己水平居中
		  5、行内元素与行内块级元素无法使用margin:0 auto;设置至中

		 -->
		<div class="box1">
			<div class="box2"></div>
		</div>
		
	</body>
</html>
